<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 页面测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
        button { padding: 10px 20px; margin: 5px; cursor: pointer; }
        #result { margin-top: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 3px; }
    </style>
</head>
<body>
    <h1>AI 页面功能测试</h1>
    
    <div class="test-section">
        <h3>1. 页面访问测试</h3>
        <button onclick="testPageAccess()">测试页面访问</button>
        <div id="pageResult"></div>
    </div>
    
    <div class="test-section">
        <h3>2. API 配置测试</h3>
        <button onclick="testApiConfig()">测试 API 配置</button>
        <div id="apiResult"></div>
    </div>
    
    <div class="test-section">
        <h3>3. Moonshot API 测试</h3>
        <button onclick="testMoonshotAPI()">测试 Moonshot API</button>
        <div id="moonshotResult"></div>
    </div>

    <script>
        async function testPageAccess() {
            const result = document.getElementById('pageResult');
            try {
                const response = await fetch('/AI');
                if (response.ok) {
                    result.innerHTML = '<div class="success">✅ 页面访问正常 (状态码: ' + response.status + ')</div>';
                } else {
                    result.innerHTML = '<div class="error">❌ 页面访问失败 (状态码: ' + response.status + ')</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="error">❌ 页面访问错误: ' + error.message + '</div>';
            }
        }

        async function testApiConfig() {
            const result = document.getElementById('apiResult');
            try {
                // 测试配置 API
                const response = await fetch('/src/config/api.ts');
                if (response.ok) {
                    result.innerHTML = '<div class="success">✅ API 配置文件存在</div>';
                } else {
                    result.innerHTML = '<div class="error">❌ API 配置文件不存在</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="error">❌ API 配置测试错误: ' + error.message + '</div>';
            }
        }

        async function testMoonshotAPI() {
            const result = document.getElementById('moonshotResult');
            result.innerHTML = '<div>🔄 正在测试 Moonshot API...</div>';
            
            try {
                const response = await fetch('https://api.moonshot.cn/v1/models', {
                    method: 'GET',
                    headers: {
                        'Authorization': 'Bearer sk-UZr1pGehZlVSBzEb65JyBdLVR5YYahr4DaAohDGUUYAQwTxI',
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    result.innerHTML = '<div class="success">✅ Moonshot API 连接正常<br>可用模型数量: ' + (data.data?.length || 0) + '</div>';
                } else {
                    result.innerHTML = '<div class="error">❌ Moonshot API 连接失败 (状态码: ' + response.status + ')</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="error">❌ Moonshot API 测试错误: ' + error.message + '</div>';
            }
        }

        // 页面加载时自动运行测试
        window.onload = function() {
            console.log('AI 页面测试工具已加载');
        };
    </script>
</body>
</html>
